<template>
  <nut-divider>更新时间：{{currentData.collecttime}}</nut-divider>
  <nut-grid :column-num="3" square>
    <nut-grid-item>
        <div align="center">
          <ul >
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="wendu" :size="48" color="#1989fa" />
          </ul>
          <ul>温度(℃)</ul>
          <ul>{{currentData.temperature}}</ul>
        </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="shidu" :size="48" color="#1989fa" />
        </ul>
        <ul>湿度(%)</ul>
        <ul>{{currentData.humidity}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="dianya" :size="48" color="#1989fa" />
        </ul>
        <ul>电压(v)</ul>
        <ul>{{currentData.voltage}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="wendu" :size="48" color="#1989fa" />
        </ul>
        <ul>温度(℃)</ul>
        <ul>{{currentData.temperature}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="shidu" :size="48" color="#1989fa" />
        </ul>
        <ul>湿度(%)</ul>
        <ul>{{currentData.humidity}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="dianya" :size="48" color="#1989fa" />
        </ul>
        <ul>电压(v)</ul>
        <ul>{{currentData.voltage}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="wendu" :size="48" color="#1989fa" />
        </ul>
        <ul>温度(℃)</ul>
        <ul>{{currentData.temperature}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="shidu" :size="48" color="#1989fa" />
        </ul>
        <ul>湿度(%)</ul>
        <ul>{{currentData.humidity}}</ul>
      </div>
    </nut-grid-item>
    <nut-grid-item>
      <div align="center">
        <ul >
          <nut-icon font-class-name="iconfont" class-prefix="icon" name="dianya" :size="48" color="#1989fa" />
        </ul>
        <ul>电压(v)</ul>
        <ul>{{currentData.voltage}}</ul>
      </div>
    </nut-grid-item>
  </nut-grid>
</template>

  <script lang="ts" setup name="MemberPage">
    import { useAxios } from '@vueuse/integrations/useAxios'
    import { useIntervalFn } from '@vueuse/core'

    type IotData=  {
      collecttime: string,
      id: string,
      temperature: number,
      humidity: number,
      voltage:  number,
    };
    const  currentData = ref<IotData>({
      collecttime: "",
      id: "",
      temperature: 0,
      humidity: 0,
      voltage:  0,
    });

    const { pause, resume, isActive } = useIntervalFn(() => {
      getCurrentData();
    }, 1000)
    defineExpose({ pause, resume, isActive })
    async function getCurrentData(){
      const { execute } = useAxios()
      const result = await execute("http://150.158.11.142:5000/voltage?id=12")
      currentData.value = result.data.value;
    }
    onMounted(() => {
      getCurrentData();
    });
  </script>

  <style lang="scss">
    .avatar-wrap {
      display: flex;
      margin: 0 10px 40px;
      align-items: center;
      .member-detail {
        margin-left: 20px;
        .nickname {
          font-size: 16px;
          font-weight: bold;
          .nut-button {
            margin-left: 10px;
          }
        }
        .info {
          margin-top: 10px;
          font-size: 16px;
        }
      }
    }
  </style>
